<template>
  <div>
    <el-empty
      v-if="_value.length === 0"
      description="监听事件列表为空"
      style="margin: 10px 30px"
    />
    <el-table
      v-else
      ref="tableDataRef"
      :data="_value"
      border
      max-height="500"
      highlight-current-row
    >
      <el-table-column type="index" label="操作" width="80">
        <template #default="scope">
          <div style="display: flex">
            <el-button
              icon="Minus"
              size="small"
              type="danger"
              circle
              @click="handleEventDelete(scope.$index)"
            />
            <el-button
              icon="Edit"
              size="small"
              type="warning"
              circle
              @click="handleEventChange(scope.row)"
            />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        prop="methods"
        label="触发时机"
        width="130"
        show-overflow-tooltip
      >
        <template #default="scope">
          <DictTag :options="data.flowMethods" :value="scope.row.methods" />
        </template>
      </el-table-column>
      <el-table-column
        prop="listenerName"
        label="事件处理器"
        width="130"
        show-overflow-tooltip
      />
      <el-table-column
        prop="groups"
        label="事件条件组"
        width="130"
        show-overflow-tooltip
      >
        <template #default="scope">
          <el-tag>{{ scope.row.groups.length }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        prop="remark"
        label="备注"
        width="70"
        show-overflow-tooltip
      />
      <el-table-column
        prop="sort"
        label="排序"
        width="70"
        show-overflow-tooltip
      />
    </el-table>
  </div>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { DIC_PROP } from "@/views/design/process/Dict";
import DictTag from "@/components/dictTag.vue";
import type { EventListener } from "@/views/design/process/ProcessNodes";

const props = defineProps({
  eventType: {
    type: String,
    default: "0"
  }
});

const _value: any = defineModel<EventListener[]>();
const emits = defineEmits(["change", "delete"]);

const tableDataRef = ref(null);

const data = reactive({
  flowMethods: []
});

onMounted(() => {
  if (props.eventType === "0") {
    data.flowMethods = DIC_PROP.NODE_METHODS;
  } else if (props.eventType === "1") {
    data.flowMethods = DIC_PROP.FLOW_METHODS;
  } else if (props.eventType === "2") {
    data.flowMethods = DIC_PROP.JOB_METHODS;
  }
});

const handleEventChange = row => {
  if (!row) return;
  const form: any = {};
  form.listenerId = row.listenerId;
  form.listenerName = row.listenerName;
  form.methods = row.methods;
  form.ruleType = row.ruleType;
  form.remark = row.remark;
  form.sort = row.sort;
  form.ruleCode = row.ruleCode;
  form.groupType = row.groupType;
  form.groups = row.groups;
  form.eventParams = row.eventParams;
  emits("change", form);
};

const handleEventDelete = (index: number) => {
  console.log(index);
  emits("delete", index);
};
</script>
